画像をランダムに表示する
今回は、画像をランダムに表示するテクニックを紹介します。このテクニックは、JavaScriptの「Math.random()」を利用すると実現できます。「Math.random()」は0〜1未満の乱数を発生させる命令となるため、これを自分の思い通りの数値になるように加工（演算）することが最大のポイントです。

→ 画像の表示領域を確保する
 
まずは、画像を表示するための領域を確保します。IMGタグにid属性を追加し、画像を表示領域に名前を付けておきます（今回の例では「imgframe」という名前を付けました）。また、BODYタグにonLoadイベントを追加し、自作のJavaScript関数「randimage()」を自動的に呼び出すようにします。
<BODY bgcolor="#000066" onLoad="randimage()">
　　：
　　：
<IMG src='img01.jpg' id="imgframe"><BR>
　　：
　　：
</BODY>


→ 画像ファイル名を配列で定義する
 
次は、JavaScriptで使用する変数を定義します。まずは変数rtimeですが、これは画像が切り替わる間隔を1/1000秒単位で指定します。さらに、画像のファイル名を代入する配列imageを定義しておきます。今回は6つの画像をランダムに表示させるので、image[0]〜image[5]のそれぞれに'img01.jpg'〜'img06.jpg'を代入しました。
<SCRIPT language="JavaScript">
<!--
var rtime=5000;
var image= new Array();
image[0]='img01.jpg';
image[1]='img02.jpg';
image[2]='img03.jpg';
image[3]='img04.jpg';
image[4]='img05.jpg';
image[5]='img06.jpg';
//-->
</SCRIPT>


→ JavaScript関数「randimage()」を自作する
 
続いて、JavaScript関数「randimage()」を自作します。ここでは、最初に「x=Math.floor(Math.random() * image.length);」で変数xの値を0〜5に変化させています。冒頭でも解説したように、「Math.random()」は0〜1未満の乱数を発生させる命令です。これに「image.length」（配列imageの要素数6）を掛け算すると、0〜6未満の数値が得られます。さらに、「Math.floor()」で小数点以下を切り捨てると、変数xに0〜5の整数が代入されます。あとは、「imgframe.src」で表示する画像ファイルを変更し、setTimeoutで繰り返し「randimage()」呼び出せば、画像のランダム表示が完成します。
<SCRIPT language="JavaScript">
<!--
var rtime=5000;
var image= new Array();
image[0]='img01.jpg';
image[1]='img02.jpg';
image[2]='img03.jpg';
image[3]='img04.jpg';
image[4]='img05.jpg';
image[5]='img06.jpg';
function randimage(){
x=Math.floor(Math.random() * image.length);
imgframe.src=image[x];
t=setTimeout('randimage()',rtime);
}
//-->
</SCRIPT>


→ 残像を残しながら画像をランダムに切り替える
 
最後に、このテクニックの応用例として「残像を残しながら画像をランダムに切り替える」方法を紹介しておきましょう。今回紹介したテクニックと前回の講座内容を組み合わせれば、その概要を把握できると思います。以下にソースの一部を記しておくので、各自で研究してみてください。
※「filters.blendTrans」が有効となるのは、Internet Explorer 4.0以降だけです。Netscapeなどのブラウザでは、このテクニックが正しく機能しないことに注意してください。
<SCRIPT language="JavaScript">
<!--
var time=2;
var rtime=5000;
var image= new Array();
image[0]='img01.jpg';
image[1]='img02.jpg';
image[2]='img03.jpg';
image[3]='img04.jpg';
image[4]='img05.jpg';
image[5]='img06.jpg';
function randimage(){
imgframe.filters.blendTrans.Apply();
imgframe.filters.blendTrans.duration=time;
x=Math.floor(Math.random() * image.length);
imgframe.src=image[x];
imgframe.filters.blendTrans.Play();
t=setTimeout('randimage()',rtime);
}
//-->
</SCRIPT>
<BODY bgcolor="#000066" onLoad="randimage()">
　　：
　　：
<IMG src='img01.jpg' id="imgframe" style="filter:blendTrans"><BR>
　　：
　　：
</BODY>


�y�V���o�C��[UNLIMIT��������1�~] EC�i�r���|�C���� Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I


�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� �����������O�~�y�������������z �C�O���s�����������I �C�O�z�e��